<template>
	<div id="me" class="bg-assist mb-footer">
		<div class="me-header">
			<div class="container-fluid">
				<div class="me-title">
					<!-- <span>设置</span>
					<span class="message">
						<i class="iconfont icon-message"></i>
						<span class="badge-point"></span>
					</span> -->
				</div>
				<router-link to="/me/profile" tag="div" class="user clearfix">
					<img class="avatar" :src="user.avatar ? user.avatar : '/images/avatar.png'">
					<div class="username">{{user.nickname}}</div>
					<i class="iconfont icon-right pull-right"></i>
				</router-link>
			</div>
		</div>
		<el-row class="bg-white tool-line">
			<router-link to="/me/favorites" tag="span">
				<el-col class="text-center"	:span="8">
					<p>{{user.favorites}}</p>
					商品收藏
				</el-col>
			</router-link>
			<router-link to="/me/evaluates" tag="span">
				<el-col	class="text-center" :span="8">
					<p>{{user.evaluates}}</p>
					评价晒单
				</el-col>
			</router-link>
			<router-link to="/me/footprints" tag="span">
				<el-col	class="text-center" :span="8">
					<p>{{footprints}}</p>
					我的足迹
				</el-col>
			</router-link>
		</el-row>
		<div class="tool-line">
			<div class="order-title container-fluid">
				<span>我的订单</span>
				<router-link to="/me/orders" tag="div" class="pull-right">
					查看全部订单<i class="iconfont icon-right"></i>
				</router-link>
			</div>
			<ul class="icon-place clearfix">
				<router-link to="/me/orders?status=0" tag="li">
					<el-badge is-dot class="item" :hidden="!user.orders.hasOwnProperty('0')">
						<p>
							<i class="iconfont icon-fukuan"></i>
						</p>
						待付款
					</el-badge>

				</router-link>
				<router-link to="/me/orders?status=1" tag="li">
					<el-badge is-dot class="item" :hidden="!user.orders.hasOwnProperty('1')">
						<p>
							<i class="iconfont icon-daifahuo"></i>
						</p>
						待发货
					</el-badge>

				</router-link>
				<router-link to="/me/orders?status=2" tag="li">
					<el-badge is-dot class="item" :hidden="!user.orders.hasOwnProperty('2')">
						<p>
							<i class="iconfont icon-shouhuo"></i>
						</p>
						待收货
					</el-badge>
				</router-link>
				<router-link to="/me/orders?status=3" tag="li">
					<el-badge is-dot class="item" :hidden="!user.has_evaluate_order> 0">
						<p>
							<i class="iconfont icon-daipingjia"></i>
						</p>
						待评价
					</el-badge>
				</router-link>
				<!-- <router-link to="/me/orders?status=4" tag="li">
					<el-badge is-dot class="item" :hidden="!user.orders.hasOwnProperty('4')">
						<p>
							<i class="iconfont icon-tuikuan"></i>
						</p>
						退款/售后
					</el-badge>
				</router-link> -->
			</ul>
		</div>

		<div class="tool-line necessary-tool">
			<div class="container-fluid title">
				必备工具
			</div>
			<div class="clearfix">
				<router-link to="/me/balance" tag="div" class="grid">
					<p>
						<i class="iconfont icon-danger icon-yue"></i>
					</p>
					账户余额
				</router-link>
				<router-link to="/me/address" tag="div" class="grid">
					<p>
						<i class="iconfont icon-blue icon-position"></i>
					</p>
					收货地址
				</router-link>
				<router-link to="/help" tag="div" class="grid">
					<p>
						<i class="iconfont icon-warning icon-bangzhu"></i>
					</p>
					帮助中心
				</router-link>
			</div>
		</div>
		<div>
			<el-button :style="{
				display: 'block',
				width: '100%'
				}" type="danger" @click="logout">退出登录</el-button>
		</div>
		<app-footer></app-footer>
		<div class="bottom-margin"></div>
	</div>
</template>

<script>
import AppFooter from '~/components/AppFooter.vue';
import api from '~/api/api.js';

export default {
	name: 'me',
	components: {
		AppFooter
	},
	data () {
		return {
			user: {
				orders: {},
				has_evaluate_order: 0
			}
		}
	},
	computed: {
		footprints () {
			let history = window.localStorage.getItem('history');
			if (!history) {
				return 0;
			}

			return history.split(',').length;
		}
	},
	created () {
		this.$store.commit('loading', true);
		api.get('/user/info')
		.then(response => {
			this.$store.commit('loading', false);
			this.user = response.data;
		})
		.catch(error => {
			this.$store.commit('loading', false);
			this.$message.error('加载失败');
		});
	},
	methods: {
		logout () {
			this.$store.commit('logout');
			this.$router.push('/auth/login');
		}
	}
}
</script>

<style scoped>
.me-header {
	background: -webkit-linear-gradient(left, #c8182b , #d54025);
    background: -o-linear-gradient(right, #c8182b, #d54025);
    background: -moz-linear-gradient(right, #c8182b, #d54025);
    background: linear-gradient(to right, #c8182b , #d54025);

    padding-bottom: 10px;
}

.me-title {
	padding: 10px 0px;
	color: #fff;
	font-weight: 300;
	height: 40px;
}

.message {
	float: right;
	position: relative;
}

.me-title .icon-message {
	font-size: 18px;
}

.badge-point {
	padding: 5px;
    width: 0;
    height: 0;
    display: inline-block;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    right: -4px;
    top: 0px;
}

.user {
	height: 70px;
	line-height: 70px;
	color: #fff;
}

.avatar {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	float: left;
}

.username {
	float: left;
	display: inline-block;
	margin-left: 15px;
}

.user .icon-right {
	font-size: 20px;
}

.tool-line {
	margin-bottom: 10px;
	padding: 10px 0px;
	background-color: #fff;
}

.order-title {
	padding-bottom: 10px;
	border-bottom: 1px solid #c7c7c7;
}

.icon-place {
	padding: 10px 0px;
	text-align: center;
}

.icon-place li {
	float: left;
	width: 25%;
	font-size: 14px;
}

.icon-place li .iconfont {
	font-size: 25px;
}

.grid {
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
	width: 33%;
	float: left;
	text-align: center;
	padding: 30px 0px;
}

.grid:nth-child(n+1), .grid:nth-child(n+2) {
	border-left: 1px solid #eaeaea;
}

.grid .iconfont {
	font-size: 25px;
}

.title {
	padding-bottom: 10px;
}

.necessary-tool {
	padding-bottom: 0px;
}
</style>
